<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  <title>3-5 案例：留言板</title>
  <style>
      * {
          box-sizing: border-box;
      }

      ul, li {
          list-style: none;
          margin: 0;
          padding: 0;
      }

      div, img {
          display: block;
      }

      .container {
          width: 960px;
          margin: 0 auto;
      }

      .container > div {
          width: 400px;
          margin: 0 auto;
      }

      .logo > img {
          margin: 0 auto;
      }

      button {
          margin-bottom: 5px;
      }

      textarea {
          width: 100%;
          height: 100px;
          border-radius: 5px;
          padding: 10px;
          display: block;
      }

      .newdate {
          color: gray;
          font-size: 13px;
      }

      .list-content .list-item {
          position: relative;
          display: flex;
          padding: 5px;
          border: solid 1px #d9d9d9;
          margin-bottom: 5px;
      }

      .list-item .avatar {
          width: 50px;
          height: 50px;
      }

      .list-item .text {
          width: 180px;
          height: 50px;
          margin-left: 10px;
          word-break: break-word;
          overflow: scroll;
      }

      .list-item .time {
          position: absolute;
          right: 5px;
          color: gray;
          font-size: 13px
      }

  </style>
</head>
<body>
<div id='app'>
  <div class='container'>
    <div class='logo'>
      <img alt='' src='./imgs/logo.png' />
    </div>
    <div>
      <button @click='submit' @keyup.enter='submit'>评论</button>
    </div>
    <div>
      <textarea placeholder='请输入评论内容' v-model='comment'></textarea>
    </div>
    <div>
      <p class='newdate'>最新回复时间：{{ lastCommentTime }}</p>
      <ul class='list-content'>
        <!--        <li class="list-item">-->
        <!--          <img src="./imgs/avatar.jpeg" class="avatar" alt="" />-->
        <!--          <div class="text">112131321</div>-->
        <!--          <div class="time">2023-07-04 13:00:00</div>-->
        <!--        </li>-->
        <li :key='index' class='list-item' v-for='(comment, index) in commentList'>
          <img alt='' class='avatar' src='./imgs/avatar.jpeg' />
          <div class='text'>{{ comment.text }}</div>
          <div class='time'>{{ comment.time }}</div>
        </li>
      </ul>

    </div>
  </div>
</div>
<script src='../lib/vue.global.js' type='text/javascript'></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        comment: '',
        lastCommentTime: '',
        commentList: []
      }
    },
    methods: {
      submit() {
        if (this.comment === '') {
          return
        }

        this.lastCommentTime = this.formatDate(Date.now())
        this.commentList.push({
          text: this.comment,
          time: this.lastCommentTime
        })
        this.comment = ''
      },
      formatDate(value) {
        let date = new Date(value)
        let year = date.getFullYear()
        let month = date.getMonth() + 1 + ''
        let day = date.getDate() + ''
        let hour = date.getHours() + ''
        let minute = date.getMinutes() + ''
        let second = date.getSeconds() + ''
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
      }
    }
  })
  app.mount('#app')
</script>
</body>
</html>
